<template>
  <div class="wrap">
    <span class="close iconfont iconnew iconicon-test"></span>
    <img src="../../assets/logo.png" alt class="logo" />
    <br />
      <div class="box">
          <InputDom 
           inputType='text'
           placeHolder='用户名/手机号码'
           rule='\d{11}'
           err_msg='请输入正确手机号'
           @Valuechange='getusername'
           />
          <InputDom 
           inputType='text'
           placeHolder='昵称'
           rule='[\u4e00-\u9fa5]{2,4}'
           err_msg='请输入合法昵称'
            @Valuechange='getnickname'/>
           <InputDom 
           inputType='password'
           placeHolder='密码'
           rule='\d{6}'
           err_msg='请输入合法的密码'
            @Valuechange='getpassword'/>
         <ButtonDom inputValue='注册' @clicked='getclick'/>
      </div>
  </div>
</template>

<script>
//引入输入框组件
import InputDom from '@/components/InputDom'

// 引入按钮组件
import ButtonDom from '@/components/ButtonDom'

//  配置组件
export default {
     components:{
       InputDom,
       ButtonDom
     },
     data(){
        return {
          username:'',
          password:'',
          another:''
        }
     },
     methods:{
       //获取用户名存入自己的data中
       getusername(username){
         this.username = username
       },
       
       //获取昵称存入自己的data中
       getnickname(nickname){
         this.nickname = nickname
       },

       //获取密码存入自己的data中
       getpassword(password){
         this.password = password
       },

       //检测到按钮组件被点击了
       getclick(){
        //  console.log('点击了');
          //发起请求
          // 注册
          // 接口类型:【POST】
          // 接口地址: /register
          // 参数: username  password nickname
          this.$axios({
            method:'post',
            url:'/register',
            data:{
               username:this.username,
               password:this.password,
               nickname:this.nickname

            }
          })
          .then((res)=>{
            // console.log(res);
            if(res.data.data){
               this.$toast({
                message:res.data.message,
             })
             this.$router.push({ path:'/login'}) 
            }  
          })
       },
     }
};
</script>

<style lang='less' scoped>
.wrap {
  position: relative;
  width: 100%;
  height: 100%;
  .close {
     position: absolute;
     left: 10/360*100vw;
     top: 10/360*100vw;
     font-size: 20/360*100vw;
    
  }

  .logo {
    width: 100/360 * 100vw;
    height: 100/360 * 100vw;
    margin: 100/360 * 100vw 130/360 * 100vw 0;
  }

  .box {
      width: 100%;
      height: 100%;
     
  }
}
</style>